import React, { FC, useState } from "react";
import styles from './common.module.scss'
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { Button, Empty, Table, Tag, Space, Spin, Segmented, ConfigProvider, message } from 'antd';
import QuestionCardSquare from "../../components/QuestionCardSquare";
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData'
import { JSX } from "react/jsx-runtime";
import {useRequest} from 'ahooks'
import { updateQuestionService,deleteQuestionsService } from "../../services/question";



const Trash: FC = () => {
    const { data = {}, loading,refresh } = useLoadQuestionListData({ isDeleted: true })
    const { list = [] } = data
    const [flag, setFlag] = useState("true")
    //记录选中的ID
    const [selectedIds, setselectedIds] = useState<string[]>([])
    //恢复
    const {run:recover}=useRequest(
        async()=>{for await (const id of selectedIds){
            await updateQuestionService(id,{isDeleted:false})
        }},
        {
            manual:true,
            debounceWait:500,//防抖 
            onSuccess(){
                message.success('恢复成功')
                refresh() //手动刷新列表
            }
        }
    )
     //删除
     const {run:redeletes}=useRequest(
        async()=>await deleteQuestionsService(selectedIds),
        {
            manual:true,
            debounceWait:500,//防抖 
            onSuccess(){
                message.success('删除成功')    
                refresh() //手动刷新列表   
            }
        }
    )

    const segmentedList = [
        {
            value: "true",
            icon: <AppstoreOutlined />,
        },
        {
            value: "false",
            icon: <BarsOutlined />,
        },
    ]
    const tableColumns = [
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '是否发布',
            dataIndex: 'isPublished',
            render: (isPublished: boolean) => {
                return isPublished ? <Tag color="green">已发布</Tag> : <Tag>未发布</Tag>
            },
        },
        {
            title: '答卷',
            dataIndex: 'answerCount',
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
        }
    ]
    return <>
        <div className={styles.header}>
            <div className={styles.left}>
                <span>回收站</span>
            </div>
            <div className={styles.right}>
                <div className={styles.check}>
                    <ConfigProvider
                        theme={{
                            components: {
                                Segmented: {
                                    itemSelectedBg:"#0095ff",
                                    colorInfoText:"White"                                                                 
                                },
                            },
                        }}
                    >
                        <Segmented
                            options={segmentedList}
                            onChange={(e) => { setFlag(e.toString()) }}
                        />
                    </ConfigProvider>


                </div>
            </div>
        </div>
        <Spin spinning={loading}>
            <div className={styles.content}>
                {list.length === 0 && loading == false && <Empty />}
                {flag == "true" ? <div className={styles.trashBody}>
                    {list.length > 0 && list.map((q: JSX.IntrinsicAttributes & { _id: string; title: string; isStar: boolean; isPublished: boolean; answerCount: number; createAt: string; }) => {
                        const { _id } = q
                        const arr = _id.split("");
                        return <QuestionCardSquare key={_id} {...q} Ids={arr} />
                    })}
                </div> : <div>
                    {list.length > 0 &&
                        <>
                            <Space style={{ margin: '10px 0' }}>
                                <Button disabled={selectedIds.length > 0 ? false : true} onClick={recover }>恢复</Button>
                                <Button disabled={selectedIds.length > 0 ? false : true} danger onClick={redeletes}>删除</Button>
                            </Space>
                            <Table
                                dataSource={list}
                                columns={tableColumns}
                                rowKey={record => record._id}
                                pagination={false}
                                rowSelection={{
                                    type: "checkbox",
                                    onChange: (selectedRowKeys) => {
                                        setselectedIds(selectedRowKeys as string[])
                                    }
                                }}
                            />
                        </>
                    }
                </div>}


            </div>
        </Spin>
    </>
}

export default Trash